<template>
    <layout>

    	<mt-header title="系统消息">
            <a href="javascript:window.history.go(-1);" slot="left">
    	 <mt-button icon="back"></mt-button>
            </a>

		</mt-header>
  		<div class="new_box">

            <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <ul class="ui_list page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                    <li class="item" v-for="item in list">
						<a :href="'/notice/detail/' + item.id">
                            <div class="top">
                                <div class="top_l">{{ item.title }} <span>阅读</span> </div>
                                <div class="top_r">2017-02-22
                                    <img src="http://img-test.zzyuu.com/edu/img/gd_img.png" >
                                </div>
                            </div>

                            <div class="con">
                                <div class="con_con">
                                    {{ item.intro }}
                                </div>

                            </div>
                        </a>
					</li>
				</ul>
            </div>

			</div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                selected: '1',
                list: [],
                lastPage: false,
                pageNo: 0,
                nextPage: 1,
                sort: 0,
                type: '',
                loading: false,
                wrapperHeight: 0
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            loadMore(){
                if (this.lastPage){
                    return;
                }

                this.loading = true;
                this.$http.get('/api/notice/list', {
                    params: {
                        pageNo: this.nextPage
                    }
                }).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            data = data.data;
                            this.lastPage = data.lastPage;
                            this.pageNo = data.pageNo;
                            this.nextPage = data.nextPage;

                            let list = data.list;
                            for (let i = 0; i < list.length; i++){
                                this.list.push(list[i]);
                            }

                        }

                    }else{
                        this.lastPage = true;
                    }
                    this.loading = false;


                })
            },
        },
        created(){
        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }
</script>

